<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script>
        //focus();获得焦点
        //表单提交方法 myform.submit();
        //replace 替换
        //去掉前后空格
        //return false;在当前停下
        //select  选中
        //避免关键字  var fun = function () {};
        //声明一个对象
        /*var obj1 = new Object();
        var obj2 = new fun();
        //json   javascript的原生数据对象  主要用于数据传输 吧
        var obj3 = {};
*/
    </script>
    <script>
        //表单的验证的方法
        var check = function () {
            var _name = document.getElementById("name1");
            var _name2 = document.getElementById("name2");
            var _name3 = document.getElementById("name3");
            _name.focus();
            //用户名不能为空
            if (_name.value == '') {
                alert("用户名不能为空！");
                _name.focus();
                return false;
            }
            //密码框的验证
            if (_name2.value.length < 1) {
                alert("密码不能为空！");
                _name2.focus();
                return false;
            }
            //密码不能少于6位
            if (_name2.value.length < 6) {
                alert("密码不能少于6位！");
                _name2.focus();
                return false;
            }
            //确认密码
            if (_name2.value != _name3.value) {
                alert("密码不匹配，请重新输入");
                _name3.focus();
                return false;
            }
            //会员类型的选择
            var _sort = document.getElementsByName("sort");
            var radio_status = false;//所有单选按钮都为空
            //遍历
            for (var i = 0; i < _sort.length; i++) {
                if (_sort[i].checked == true) {
                    radio_status = true;
                    break;
                }
            }
            if (radio_status == false) {
                alert("请选择会员类型！");
                return false;
            }
            //爱好
            var _list = document.getElementsByName("sport");
            var num = 0;//
            //遍历
            for (var i = 0; i < _list.length; ++i) {
                if (_list[i].checked == true) {
                    num++;
                }
            }
            if (num == 0){
                alert('没有任何checkbox被选中');
                return false;
            }
            if (num < 2){
                alert('至少选两项爱好');
                return false;
            }
            return true;
        };

        window.onload = function () {
            document.getElementById('sub2').onclick = function () {
                //做表单的验证
                var reslut = check();
                if (reslut) {
                    document.getElementById("myform").submit();
                }
            }
        };
    </script>
</head>
<body>
<form id="myform" action='../html/enroll.html' method='post' onsubmit="return check();">
    <input type='hidden' name='hid' value='学生'/>
    <table width='100%'>
        <tr>
            <th colspan=2>注册</th>
        </tr>
        <tr>
            <td style='text-align: right ' width='50%'>
                *姓名:&nbsp;&nbsp;
            </td>
            <td width='50%'>
                <label><input type='text' value='' id="name1" name='name'/></label>
            </td>
        </tr>
        <tr>
            <td style='text-align: right '>
                *性别:&nbsp;&nbsp;
            </td>
            <td>
                <label><select name='sex'>
                    <option value='man'>男</option>
                    <option value='woman'>女</option>
                </select></label>
            </td>
        </tr>
        <tr>
            <td style='text-align: right '>*图片:&nbsp;&nbsp; </td>
            <td><label><input type='file' name='img' value=''></label></td>
        </tr>
        <tr>
            <td style='text-align: right '>*密码:&nbsp;&nbsp; </td>
            <td><label><input type='password' name='pssword' id="name2" value=''></label></td>
        </tr>
        <tr>
            <td style='text-align: right '>*确认密码:&nbsp;&nbsp;</td>
            <td><label><input type='password' name='pss' id="name3" value=''></label></td>
        </tr>
        <tr>
            <td style='text-align: right '>*会员类型:&nbsp;&nbsp;</td>
            <td><label><input type='radio' name='sort' value=''> 永久会员</label>
                <label><input type='radio' name='sort' value=''> 包年会员</label>
                <label><input type='radio' name='sort' value=''> 包月会员</label></td>
        </tr>
        <tr>
            <td style='text-align: right '>爱好:&nbsp;&nbsp;</td>
            <td><label><input type='checkbox' name='sport' value=''> 运动</label>
                <label><input type='checkbox' name='sport' value=''> 阅读</label>
                <label><input type='checkbox' name='sport' value=''> 音乐</label></td>
        </tr>
        <tr>
            <td style='text-align: right '>个人简介:&nbsp;&nbsp;</td>
            <td><label><textarea name='introduce'> </textarea></label></td>
        </tr>
        <tr>
            <td colspan="2" style='text-align: center'>
                <input type='submit' value='提交1' id="sub1"/>
                <input type='button' value='提交2' id="sub2"/>
                <input type="reset" value="重置"/>
            </td>
        </tr>
    </table>
</form>

</body>
</html>